<template>
  <div>
    <el-card class="box-card">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="userinfo"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="账户名"
          width="120"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.user_name }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.user_name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="借书or预约"
          width="220"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.if_user_borrowBook?scope.row.if_user_borrowBook:'无' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.user_state?scope.row.user_state:'无' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="还书日期"
          width="180"
        >
          <template slot-scope="scope">
            <i v-show="scope.row.book_returnTime?true:false" class="el-icon-time" />
            <span style="margin-left: 10px">{{ scope.row.book_returnTime?scope.row.book_returnTime:'无' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否逾期"
          width="80"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.if_overdue?scope.row.if_overdue:'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="warnUse(scope.$index, scope.row)"
            >警告</el-button>
            <el-button
              size="mini"
              type="info"
              @click="revoke(scope.$index, scope.row)"
            >撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="修改用户信息" :visible.sync="editorForm">
      <el-form ref="edform" :model="edform">
        <el-form-item label="用户名" :label-width="formWidth" prop="author">
          <el-input v-model="edform.user_name" disabled />
        </el-form-item>
        <el-form-item label="借书or预约" :label-width="formWidth" prop="bookType">
          <el-input v-model="edform.ifBorrowOrder" />
        </el-form-item>
        <el-form-item label="状态" :label-width="formWidth" prop="bookType">
          <el-input v-model="edform.user_state" />
        </el-form-item>
        <el-form-item label="还书日期" :label-width="formWidth" prop="bookName">
          <el-input v-model="edform.book_returnTime" />
        </el-form-item>
        <el-form-item label="是否逾期" :label-width="formWidth" prop="bookPress">
          <el-input v-model="edform.if_overdue" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancalAdd">取 消</el-button>
        <el-button type="primary" @click="editorHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllInfo, editorUse } from '@/api/user'
export default {
  name: 'PManage',
  data() {
    return {
      userinfo: [],
      edform: {},
      formWidth: '120px',
      editorForm: false
    }
  },
  computed: {
    // 对请求的数据进行处理
    // toArrUserInfo() {
    //   return this.userinfo.map(item => {
    //     item.book_returnTime = JSON.parse(item.book_returnTime || '[]')
    //     item.if_user_borrowBook = JSON.parse(item.if_user_borrowBook || '[]')
    //     item.user_state = JSON.parse(item.user_state || '[]')
    //     // console.log(JSON.parse(item.book_returnTime || '[]'))
    //     return item
    //   })
    // }
  },
  mounted() {
    this.initUseData()
  },
  methods: {
    handleEdit(index, row) {
      // console.log(this.toArrUserInfo)
      this.editorForm = true
      console.log('row=>', row)
      this.edform = {
        user_name: row.user_name,
        ifBorrowOrder: row.if_user_borrowBook,
        user_state: row.user_state,
        book_returnTime: row.book_returnTime,
        if_overdue: row.if_overdue
      }
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cancalAdd() {
      this.editorForm = false
    },
    //  编辑用户的处理函数
    async editorHandler() {
      const res = await editorUse(this.edform)
      if (res.status === 0) {
        this.$message({
          type: 'success',
          message: '修改用户信息成功!'
        })
        this.initUseData()
        this.editorForm = false
      }
    },
    // 获取用户数据的函数
    async initUseData() {
      const { data } = await getAllInfo()
      console.log(data)
      this.userinfo = data
    },
    // 对用户进行警告的处理函数
    warnUse(index, row) {
      console.log(row)
      if (row.if_overdue === '是') {
        this.$confirm('该用户已借书逾期, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已对该用户进行警告!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消警告'
          })
        })
      } else {
        this.$prompt('请输入要警告的内容', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '已警告该用户!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消警告'
          })
        })
      }
    },
    // 取消警告的处理函数
    revoke(index, row) {
      this.$confirm('将撤销对该用户的警告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已撤销对该用户进行警告!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消撤销操作'
        })
      })
    }
  }

}
</script>

<style scoped>
.text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    margin: 30px;
  }
</style>

